<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/technicianList'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="门店：">
                        <el-select v-model="paging.store_id" @change="getShiftType" style="width:200px" placeholder="请选择">
                            <el-option
                                v-for="item in shopList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班次：">
                        <el-select v-model="paging.shift_id" @change="handleCurrentChange(1)" style="width:200px" placeholder="请选择">
                            <el-option
                                v-for="item in shiftTypeList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="上钟日期：">
                        <el-date-picker
                            style="width:200px"
                            v-model="paging.date"
                            value-format="yyyy-MM-dd"
                            :clearable="false"
                            align="right"
                            type="date"
                            placeholder="今天">
                            </el-date-picker>
                    </el-form-item>
                     <el-form-item label="技师姓名：">
                        <el-input style="width:200px" clearable v-model="paging.name"></el-input>
                    </el-form-item>
                    <el-form-item label="技师工号：">
                        <el-input style="width:200px" clearable v-model="paging.number"></el-input>
                    </el-form-item>
                    <el-form-item label="国籍：">
                        <el-select style="width:200px" clearable v-model="paging.nationality" placeholder="请选择">
                            <el-option label="中国" :value="1"> </el-option>
                            <!-- <el-option label="未上架" value="2"> </el-option> -->
                            <el-option label="泰国" :value="2"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div v-if="!loading" class="operation-box clear-float">
                    <div class="title-left"> 
                    </div>
                    <el-button  :loading="isBtn2"  @click="setRowClock" type="primary" style="margin-left:auto;">生成排钟</el-button>
                    <el-button icon="el-icon-plus" @click="addTech"  type="primary">新增</el-button>
                    <!-- <el-button type="success" plain>批量上架</el-button> -->
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column type="index" label="当前顺序" width="80"></el-table-column>
                    <el-table-column prop="store_title" label="门店" > </el-table-column>
                    <el-table-column prop="staff_name" label="技师姓名" > </el-table-column>
                    <el-table-column prop="staff_number" label="工号" > </el-table-column>
                    <el-table-column label="排钟类别" >
                        <template slot-scope="scope">
                            <span >{{scope.row.type | staffType}}</span>
                        </template>
                     </el-table-column>
                     <el-table-column prop="id" label="技师国籍" >
                        <template slot-scope="scope">
                            <span >{{scope.row.staff_nationality==1?'中国':'泰国'}}</span>
                        </template>
                     </el-table-column>
                    <el-table-column prop="lately_upper_clock_time" label="最近上钟时间" width="80">
                        <template slot-scope="scope">
                            <span >{{scope.row.lately_upper_clock_time | parseTime('{h}:{i}')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lately_down_clock_time" label="最近下钟时间" width="80">
                        <template slot-scope="scope">
                            <span >{{scope.row.lately_down_clock_time | parseTime('{h}:{i}')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="已预约时间" width="120">
                        <template slot-scope="scope">
                            <span 
                            v-for="(item,i) in scope.row.reserve_project"
                            :key="i"

                            >
                                {{item.start_time | parseTime('{h}:{i}')}}
                                -
                                {{item.end_time | parseTime('{h}:{i}')}}
                                {{i==scope.row.reserve_project.length-1?'':','}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="upper_clock_number" label="今日上钟次数" >
                        <template slot-scope="scope">
                            <span>
                                {{upperClockn(scope.row)}}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="create_time" label="累计上架" > </el-table-column> -->
                    <el-table-column prop="today_upper_clock_time" label="今日上钟时长"> </el-table-column>
                    <el-table-column prop="stock" label="排序" >
                        <template slot-scope="scope" v-if="scope.$index==0">
                            <span v-if="isBtn3" class="el-icon-loading sort-a" style="cursor: auto;"></span>
                            <span v-else @click="rowClock(scope.row)"  class="el-icon-top sort-a"></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sort" label="排序" width="150">
                        <template slot-scope="scope">
                           <el-input-number size="mini"  v-model="scope.row.sort" @change="handleChange(scope.row.id,$event)" :min="0" ></el-input-number>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="备注"> 
                        <template slot-scope="scope" >
                            <span class="">{{scope.row.note}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-table-text">编辑</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div> -->
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="新增技师上钟" width="500px" :visible.sync="dialogVisible" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="技师姓名" prop="staff_id">
                    <el-select v-model="ruleForm.staff_id" @change="chng" placeholder="请选择">
                        <el-option
                            v-for="item in staffList"
                            :key="item.id"
                            :label="item.name"
                            :disabled="item.disabled"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工号" prop="number">
                    <el-input v-model="ruleForm.number" readonly placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="排钟类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="轮钟" :value="1"> </el-option>
                        <el-option label="点钟" :value="2"> </el-option>
                        <el-option label="加班1点钟" :value="3"> </el-option>
                        <el-option label="加班1轮钟" :value="4"> </el-option>
                        <el-option label="加班2点钟" :value="5"> </el-option>
                        <el-option label="加班2轮钟" :value="6"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上钟日期：" prop="date">
                    <el-date-picker
                        style="width:100%"
                        :clearable="false"
                        v-model="ruleForm.date"
                        value-format="yyyy-MM-dd"
                        align="right"
                        type="date"
                        placeholder="请选择上钟日期">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input v-model="ruleForm.note"  type="textarea" :rows="4" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="顺序" prop="sort">
                     <el-input-number v-model="ruleForm.sort" :step="1" step-strictly :min="0" size="mini"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button :loading="isBtn" type="primary" @click="rowClockSave">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改备注" :visible.sync="dialogVisible2">
            <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model.trim="note.content">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button :loading="isBtn" type="primary" @click="setNote">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            note:'',
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isBtn2: false,
            isBtn3: false,
            dialogVisible: false,
            dialogVisible2:false,
            shiftTypeList:[],
            staffList:[],
            paging: {
                store_id: '',//	门店ID
                name:'',	//姓名
                number:'',//	技师工号
                nationality:'',//国籍
                shift_id:'',//	班次
                date:this.utils.dateFormat("Y-m-d",new Date()),
                page: 1,
                total: 0,
                limit: 10,
            },
            rules:{
                store_id:{ required: true, message: '请选择门店', trigger: 'change' },
                shift_id:{ required: true, message: '请选择班次', trigger: 'change' },
                staff_id:{ required: true, message: '请选择技师', trigger: 'change' },
                type:{ required: true, message: '请选择排钟类型', trigger: 'change' },
                date:{ required: true, message: '请选择上钟日期', trigger: 'blur' },
            },
            ruleForm: {
                store_id:'',//门店ID
                staff_id:'',//员工ID
                shift_id:'',//班次ID
                date:this.utils.dateFormat("Y-m-d",new Date()),//上钟日期
                type:'',//排钟类型
                note:'',//备注
                sort:'',//排序
            },
            classList:[],
            shopList:[],
            tableData: []
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 0:
                    val = '下架'
                    break;
                case 1:
                    val = '正常'
                    break;
            }
            return val;
        }
    },
    created() {
        if (this.$route.path == '/technicianList') {
            // this.handleCurrentChange(1);
            this.homegetStore();
        }
    },
    watch:{
        dialogVisible2(val){
            if(!val)this.note = {};
        }
    },
    methods: {
        upperClockn(val){
            let type = ['upper_clock_number_one','spot_clock_number_one','upper_clock_number_two','spot_clock_number_two','upper_clock_number','spot_clock_number'],value = 0;
            for(let key in type){
                let v = Number.parseFloat(val[type[key]])
                if(v){
                    value+=v;
                }
            }
            return value;
        },
        chng(e){
            this.ruleForm.number = this.staffList.find(v=>v.id == e).number;
        },
        addTech(){
            this.dialogVisible = true;
            this.ruleForm.store_id = this.paging.store_id;
            this.ruleForm.shift_id = this.paging.shift_id;
        },
        async rowClock(row){
            this.isBtn3 = true;
            let {code,data} = await this.$Http.rowClock({
                id:row.id,
                store_id:this.paging.store_id,
                shift_id:this.paging.shift_id
            });
            this.isBtn3 = false;
            if(code){
                this.repairGetList();
            }
        },
        async setNote(){
            if(!this.textarea){
                // return this.$message.error('')
            }
            this.isBtn = true;
            let {code,data} = await this.$Http.updateNote(this.note)
            this.isBtn = false;
            if(code){
                this.$message.success('备注修改成功!')
                this.dialogVisible2 = false;
                this.repairGetList()
            }
        },
        rowClockSave(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                let {code,data} = await this.$Http.rowClockSave(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success('新增成功!');
                    this.handleClose();
                    this.handleCurrentChange(1);
                }
            });
        },
        async handleChange(id,val){
             let {code,data} = await this.$Http.updateRowSort({
                id:id,
                sort:val
            });
            if(code){
                this.repairGetList()
            }
        },
        async homegetStaff(){
            let {code,data} = await this.$Http.homegetStaff({
                store_id:this.paging.store_id
            });
            if(code){
                console.log(this.tableData,'this.tableDatathis.tableData');
                // data.forEach(v=>{
                //     for(let val of this.tableData){
                //         if(val.staff_id == v.id)
                //             v.disabled = true;
                //     }
                // })
                this.staffList = data;
            }
        },
        async setRowClock(){
            this.isBtn2 = true;
            let {code,data} = await this.$Http.setRowClock({
                store_id:this.paging.store_id,
                shift_id:this.paging.shift_id,
            });
            this.isBtn2 = false;
            if(code){
                this.handleCurrentChange(1);
                this.$message.success('技师排钟生成成功!')
            }
        },
        async getShiftType(store_id){//获取班次
            this.loading = true;
            let {code,data} = await this.$Http.getStoreShift({store_id})
            if(code){
                this.paging.shift_id = data.length?data[0].id:''
                this.shiftTypeList = data;
                // this.handleCurrentChange(1)
                await this.repairGetList();
                this.homegetStaff();
            }
        },
        async homegetStore(){//获取门店
            this.loading = true;
            let { code,data } = await this.$Http.homegetStore();
            if(code){
                this.paging.store_id = data.length?data[0].id:''
                this.shopList = data;
                // this.staffshift(data[0].id)
                await this.getShiftType(data[0].id);
            }
        },
        async setRow(row) {
            this.dialogVisible2 = true;
            this.note = {
                content: row.note,
                id:row.id
            };
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.rowClocklists(this.paging);
            this.loading = false;
            if (code) {
                // data.data.forEach((ele,index)=>{
                //     if(ele.picture){
                //         let img = ele.picture.split(',')
                //         ele.picture = img
                //     }
                // })
                this.tableData = data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = Object.assign(this.paging,{name:'',number:'',nationality:'',date:this.utils.dateFormat("Y-m-d",new Date())})
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
            
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
.sort-a{
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 5px;
}
</style>